<template>
	<div class="main">
		<el-card shadow="never" class="card">

			<h4>订单信息:{{orderReturnApply.status==0?'待处理':''||orderReturnApply.status==1?'退货中':''||orderReturnApply.status==2?'已完成':''||orderReturnApply.status==3?'已拒绝':''}}
			</h4>
			<div class="card-item1">
				<span>订单编号:{{orderReturnApply.orderSn}}</span>
				<span>
					<el-button type="primary" size="mini" @click="toOrderInfo">查看订单详情</el-button>
				</span>
				<span>退单人姓名:{{orderReturnApply.returnName}}</span>
				<span>退单理由:{{orderReturnApply.reason}}</span>
				<span>退单描述:{{orderReturnApply.description}}</span>
				<span>申请时间:{{orderReturnApply.createTime}}</span>
				<span>退单图片:
					<img :src="orderReturnApply.proofPics" alt="" style="width: 100px; height: 100px;">
				</span>
			</div>
			<div class="card-item2">
				<h4>退货商品:</h4>
				<el-table style="width: 100%" border :data="tableData">
					<el-table-column align="center" label="商品图片" width="180">
						<img :src="orderReturnApply.productPic" alt="" style="width: 100px; height: 100px;">
					</el-table-column>
					<el-table-column label="商品描述" width="180" prop="productName">
						<template slot-scope="scope">
							<span>{{orderReturnApply.productName}}</span>
						</template>
					</el-table-column>
					<el-table-column label="商品价格">
						<span>{{orderReturnApply.productRealPrice}}</span>
					</el-table-column>
					<el-table-column label="商品属性">
						<span>{{orderReturnApply.productAttr}}</span>
					</el-table-column>
					<el-table-column label="商品数量">
						<span>{{orderReturnApply.productCount}}</span>
					</el-table-column>
					<el-table-column label="总计">
						<span>{{orderReturnApply.returnAmount}}</span>
					</el-table-column>
				</el-table>
			</div>
			<div class="card-item3">
				<h4>用户信息:</h4>
				<span>联系人:{{orderReturnApply.returnPhone}}</span>
				<span style="margin-left: 120px;">联系电话:{{orderReturnApply.returnPhone}}</span>
				<span class="item1-line1"></span>
				<h4>费用信息:</h4>
				<span>退单金额:{{orderReturnApply.returnAmount}}</span>
				<span style="margin-left: 120px;">运费金额:0</span>

				<span class="item1-line1"></span>
				<div v-show="orderReturnApply.status!=0">
					<h4>处理结果:</h4>
					<span>处理人:{{orderReturnApply.handleMan}}</span>
					<span style="margin-left: 120px;">处理备注:{{orderReturnApply.handleNote}}</span>
					<span style="margin-left: 120px;">处理时间:{{orderReturnApply.handleTime}}</span>
					<span class="item1-line1"></span>
				</div>

				<div v-show="orderReturnApply.status==2">
					<h4>收货信息:</h4>
					<span>退单收货人:{{orderReturnApply.receiveMan}}</span>
					<span style="margin-left: 100px;">退单收货备注:{{orderReturnApply.receiveNote}}</span>
					<span style="margin-left: 100px;">退单收货时间:{{orderReturnApply.receiveTime}}</span>
				</div>
				<div v-show="orderReturnApply.status==1">
					收货人<el-input v-model="orderReturnApply.receiveMan"></el-input>
					收货备注<el-input v-model="orderReturnApply.receiveNote"></el-input>
					<el-button type="primary" @click="OkGoods">确认收货</el-button>
				</div>
				<div v-show="orderReturnApply.status==0">
					退款金额:<el-input v-model="orderReturnApply.returnAmount"></el-input>
					处理人:<el-input v-model="orderReturnApply.handleMan"></el-input>
					处理备注:<el-input v-model="orderReturnApply.handleNote"></el-input>
					<el-button type="primary" @click="OkRefund">同意退款</el-button>
					<el-button type="primary" @click="NoRefund">拒绝退款</el-button>
				</div>
			</div>

		</el-card>
	</div>
</template>

<script>
	import {
		findReturnApply,
		orderReturn,
		receiveProduct,
		agreeApply,
		rejectApply
	} from "@/api/order/back/index.js"
	export default {
		data() {
			return {
				id: "",
				tableData: [],
				orderReturnApply: {

				}
			}
		},
		methods: {


			//同意退货
			OkRefund() {
				agreeApply(this.orderReturnApply).then(res => {
					if (res.success) {
						this.$message.success("确认退货成功")
						this.getBackInfo()

					}
				})
			},
			// 拒绝退货
			NoRefund() {
				rejectApply(this.orderReturnApply).then(res => {
					if (res.success) {
						this.$message.success("拒绝退货成功")
						this.getBackInfo()

					}
				})
			},
			// 确认收货
			OkGoods() {
				receiveProduct(this.orderReturnApply).then(res => {
					if (res.success) {
						this.$message.success("确认收货成功")
						this.getBackInfo()

					}
				})
			},
			// 去订单详情页
			toOrderInfo() {
				this.$router.push({
					name: "OrderInfo",
					query: {
						id: this.orderReturnApply.orderId
					}
				})
			},
			// 获取退单详情
			getBackInfo() {
				orderReturn(this.id).then(res => {
					console.log(res)
					this.orderReturnApply = res.data.orderReturnApply

					this.tableData.push(this.orderReturnApply)


				})
			}
		},
		created() {
			this.id = this.$route.params.id
			this.getBackInfo()

		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main {
		.card {
			.card-item1 {
				span {
					margin-right: 60px;
				}
			}

			.card-item3 {
				.item1-line1 {
					width: 100%;
					height: 1px;
					background-color: #007F7F;
					display: block;
					margin: 50px 0;
				}
			}
		}
	}
</style>
